<template>
  <div>
    <ZgNewPage
      ref="page"
      title="退回审批"
      :conditions="conditions"
      @condition="onSearch"
      :openCondition="true"
      :pageOpt="pageOpt"
      :dataBtns="dataBtns"
      :labelCol="7"
      @search="onSearch"
      @admin="btnClick"
    >
      <template slot="columns">
        <a-table-column
          v-for="(h, i) in headers"
          :key="`column${i}`"
          :width="h.width === 0 ? 'auto' : h.width"
          :title="h.label"
        >
          <template slot-scope="record">
            {{ record[h.code] }}
          </template>
        </a-table-column>
      </template>
    </ZgNewPage>
  </div>
</template>

<script>
export default {
  data () {
    return {
      pageOpt: {
        showConditionBtn: false
      },
      headers: [
        { code: 'instanceNo', label: '流程编号' },
        { code: 'flowName', label: '流程名称' },
        { code: 'currStepName', label: '当前环节' },
        { code: 'backReason', label: '退回原因' },
        { code: 'approvalStatusName', label: '审批状态' },
        { code: 'approvalDate', label: '审批时间' }
      ],
      conditions: [
        {
          code: 'approvalStatus',
          compType: '下拉选择',
          label: '审批状态',
          defaultVal: '',
          extra: {
            下拉选项: [
              { value: '0', label: '待审批' },
              { value: '1', label: '已同意' },
              { value: '2', label: '已拒绝' }
            ]
          }
        }
      ],
      dataBtns: [
        {
          key: 'approve',
          name: '同意',
          type: 'primary',
          icon: 'fa-check',
          isShow: (record) => record && String(record.approvalStatus) === '0'
        },
        {
          key: 'reject',
          name: '拒绝',
          type: 'danger',
          icon: 'fa-close',
          isShow: (record) => record && String(record.approvalStatus) === '0'
        }
      ],
      search: {}
    }
  },
  methods: {
    onSearch (param) {
      // 查询接口
      this.search = param
      this.$http.post('/zg-autoflow/settle/Workflow/back/getBackApproval', param, (res) => {
        console.log(res)
        this.$refs.page.endSearch({
          total: Number(res.total),
          list: res.records

        })
      })
    },
    btnClick (val) {
        const obj = {
            approvalStatus: '',
            id: val.obj.id
        }
      if (val.key === 'approve') {
        // 审批同意逻辑
        obj.approvalStatus = 1
      } else if (val.key === 'reject') {
        // 审批拒绝逻辑
        obj.approvalStatus = 2
      }
      this.$http.post('/zg-autoflow/settle/Workflow/back/backApproval', obj, res => {
        console.log(res)
        this.$message.success('修改成功')
        this.onSearch(this.search)
      })
    }
  }
}
</script>

<style scoped>
</style>
